<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

    <head>
        <meta charset="utf-8" />
        <title>日志浏览</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
        <meta content="" name="author" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <!-- App favicon -->
        <link rel="shortcut icon" href="../assets/images/favicon.ico" th:href="@{/assets/images/favicon.ico}">

        <!-- App css -->
        <link href="../assets/css/bootstrap.min.css" th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet" type="text/css" />
        <link href="../assets/css/jquery-ui.min.css" th:href="@{/assets/css/jquery-ui.min.css}" rel="stylesheet">
        <link href="../assets/css/icons.min.css" rel="stylesheet" type="text/css" />
        <link href="../assets/css/metisMenu.min.css" rel="stylesheet" type="text/css" />
        <link href="../assets/css/app.min.css" rel="stylesheet" type="text/css" />

    </head>

    <body>
        
         <!-- Top Bar Start -->
         <div th:replace="~{common/top-nav::top-nav}"></div>
        <!-- Top Bar End -->


        <!-- Left Sidenav -->
        <div th:replace="~{common/left-side-nav::left-side-nav}"></div>
        <!-- end left-sidenav-->

        <div class="page-wrapper">
            <!-- Page Content-->
            <div class="page-content">

                <div class="container-fluid">
                    <!-- Page-Title -->
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="page-title-box">
                                <div class="float-right">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="javascript:void(0);">办公自动化</a></li>
                                        <li class="breadcrumb-item"><a href="javascript:void(0);">工作日志管理</a></li>
                                        <li class="breadcrumb-item active">工作日志浏览</li>
                                    </ol>
                                </div>
                                <h4 class="page-title">工作日志浏览</h4>
                            </div><!--end page-title-box-->
                        </div><!--end col-->
                    </div>
                    <!-- end page title end breadcrumb -->
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <form class="form-inline mb-3"
                                          th:action="@{/jobLogin/jobLogin1}" method="get">
                                        <input name="pageSize" th:value="${page.pageSize}" type="hidden"/>
                                        <div class="form-group">
                                            <label class="sr-only" for="keyword">搜索</label>
                                            <input type="text" class="form-control" id="keyword" th:value="${param.keyword}"
                                                   name="keyword" placeholder="请输入关键字">
                                        </div>
                                        <button type="submit" class="btn btn-gradient-primary ml-4">搜索</button>
                                        <button id="clearBtn" type="button" class="btn btn-gradient-danger ml-4" >清除</button>
                                        <div class="table-responsive">
                                            <table class="table  table-bordered" id="makeEditable">
                                                <thead>
                                                <tr>
                                                    <th>序号</th>
                                                    <th>用户名称</th>
                                                    <th>记录时间</th>
                                                    <th>标题</th>
                                                    <th>内容</th>
                                                    <th name="buttons">操作</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr th:each="jobLogin : ${page.list}">
                                                    <td th:text="${jobLoginStat.count}"></td>
                                                    <td th:text="${jobLogin.user!=null?jobLogin.user.name:''}"></td>
                                                    <td th:text="${jobLogin.logTime}"></td>
                                                    <td th:text="${jobLogin.title}"></td>
                                                    <td th:text="${jobLogin.content}"></td>
                                                    <td name="buttons" >
                                                        <div class=" pull-left">
                                                            <a th:href="@{/jobLogin/jobLogin_modify(id=${jobLogin.id},pageSize=${page.pageSize},pageNum=${page.pageNum},keyword=${param.keyword})}">
                                                                <button id="bEdit" type="button" class="btn btn-sm btn-soft-success btn-circle mr-2" onclick="rowEdit(this);">
                                                                    <i class="dripicons-pencil"></i>
                                                                </button>
                                                            </a>
                                                            <a th:href="@{/jobLogin/jobLogin_remove(id=${jobLogin.id},pageSize=${page.pageSize},pageNum=${page.pageNum},keyword=${param.keyword})}" class="mr-2">
                                                            <button id="bElim" type="button" class="btn btn-sm btn-soft-danger btn-circle" onclick="rowElim(this);">
                                                                <i class="dripicons-trash" aria-hidden="true"></i>
                                                            </button>
                                                            </a>

                                                            <a th:href="@{/jobLogin/jobLogin_detail(id=${jobLogin.id})}" class="mr-2">
                                                                <button type="button" class="btn btn-sm btn-soft-success btn-circle mr-2" onclick="rowEdit(this);">
                                                                    <i class="far fa-file-alt text-primary"></i>
                                                                </button>
                                                            </a>
                                                        </div>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>

                                        </div>
                                    </form>
                                    <span class="float-right">
                                                    <a th:href="@{/jobLogin/jobLogin_add}">
                                                    <button id="but_add" class="btn btn-danger">添加新日志</button></a>
                                                </span><!--end table-->
                                    <div class="row mt-3">
                                        <div class="col-sm-6">
											<span class="align-middle">
												共<span th:text="${page.total}"></span>条，每页显示
												<select th:id="page-size-select" th:remove="all-but-first">
													<option th:each="pageSize : ${#numbers.sequence(5,30,5)}"
                                                            th:text="${pageSize}"
                                                            th:selected="${pageSize} == ${page.pageSize}"></option>
													<option>5</option>
													<option>10</option>
													<option>15</option>
												</select>条数据
											</span>
                                        </div>
                                        <div class="col-sm-6">
                                            <nav aria-label="Page navigation example">
                                                <ul class="pagination justify-content-end">
                                                    <li th:class="${page.isFirstPage} ? 'page-item disabled' : 'page-item'">
                                                        <a class="page-link"
                                                           th:href="@{/jobLogin/jobLogin_list(pageNum=${page.pageNum}-1,pageSize=${page.pageSize}, keyword=${param.keyword})}">上一页</a>
                                                    </li>
                                                    <li th:class="${pageNum} == ${page.pageNum} ? 'page-item active' : 'page-item'"
                                                        th:each="pageNum : ${#numbers.sequence(1,page.pages,1)}">
                                                        <a class="page-link"
                                                           th:text="${pageNum}"
                                                           th:href="@{/jobLogin/jobLogin_list(pageNum=${pageNum},pageSize=${page.pageSize},keyword=${param.keyword})}">1</a>
                                                    </li>

                                                    <li th:class="${page.isLastPage} ? 'page-item disabled' : 'page-item'">
                                                        <a class="page-link"
                                                           th:href="@{/jobLogin/jobLogin_list(pageNum=${page.pageNum}+1,pageSize=${page.pageSize},keyword=${param.keyword})}">下一页</a>
                                                    </li>
                                                </ul>
                                            </nav>
                                        </div>


                                </div><!--end card-body-->
                            </div><!--end card-->
                        </div> <!-- end col -->
                    </div> <!-- end row -->



                </div><!-- container -->

                <footer class="footer text-center text-sm-left">
                    &copy; 2022办公自动化 <span class="text-muted d-none d-sm-inline-block float-right"><i class="mdi mdi-heart text-danger"></i>来自<a href="#">4228</a></span>
                </footer><!--end footer-->
            </div>
            <!-- end page content -->
        </div>
        <!-- end page-wrapper -->

        


        <!-- jQuery  -->
        <script src="../assets/js/jquery.min.js"></script>
        <script src="../assets/js/jquery-ui.min.js"></script>
        <script src="../assets/js/bootstrap.bundle.min.js"></script>
        <script src="../assets/js/metismenu.min.js"></script>
        <script src="../assets/js/waves.js"></script>
        <script src="../assets/js/feather.min.js"></script>
        <script src="../assets/js/jquery.slimscroll.min.js"></script>
        
        <script src="../../plugins/tiny-editable/mindmup-editabletable.js"></script>
        <script src="../../plugins/tiny-editable/numeric-input-example.js"></script>
        <script src="../../plugins/bootable/bootstable.js"></script> 
        <script src="../assets/pages/jquery.tabledit.init.js"></script> 

        <!-- App js -->
        <script src="../assets/js/app.js"></script>
         <script>
             // 当下拉列表框发生改变时，向后台发送请求
             // document.getElementById("page-size-select").addEventListener("change",function (event) {
             //
             // })
             $('#page-size-select').change(function (event){
                 // 通过this对象，获得当前选择的值
                 var pageSize = $(this).val();
                 var keyword = $('#keyword').val()
                 // 向服务器发送请求
                 window.location = '/jobLogin/jobLogin1?pageNum=1&pageSize=' + pageSize +'&keyword='+ keyword;

             })

             // 为清除按钮注册事件
             $('#clearBtn').click(function (event){
                 // 通过this对象，获得到当前选择的值
                 var pageSize = $('#page-size-select').val();
                 // 向服务器发送请求
                 window.location = '/jobLogin/jobLogin1?pageNum=1&pageSize=' + pageSize;
             })

             // 为删除按钮注册单击事件
             $('.removeBtn').click(function (event){
                 // 如果在<a> 上的单击事件处理器函数返回false，就会进<a>的默认行为
                 return confirm('是否要删除？');
             })
         </script>
        </div>
    </body>

</html>